<template>
  <!-- 系统参数 -->
  <el-form :model="form" label-width="auto" label-position="top" style="margin-left: 2%">
    <!-- 显示框 -->
    <div style="display: flex; float: right; margin: 2%">
      <el-popover placement="left" :width="400" trigger="click">
        <template #reference>
          <el-button type="primary">请选择需要显示的数据</el-button>
        </template>
        <div class="mt-4" style="height: 100vh">
          <el-checkbox-group v-model="checkboxGroup1">
            <div v-for="(item, index) in FishbowlList" :key="index">
              <div v-if="item.ShowinputOrOpt">
                <el-input
                  v-model="item.propertyName"
                  placeholder="请输入"
                  size="large"
                  @blur="BtnOk(item)"
                ></el-input>
                <!-- <el-button type="primary" @click="BtnOk(item)" size="small">确定</el-button>
                <el-button @click="Close(item)" size="small">取消</el-button> -->
              </div>
              <div v-else style="display: flex">
                <el-checkbox
                  :label="item.propertyName"
                  :value="item.statusName"
                  border
                  style="margin: 1%; flex: 3"
                  @dblclick="checkMybox(item)"
                  @change="NewList(item, index)"
                />
                <el-button style="margin: 1%; flex: 1" @click="checkMybox(item)">修改</el-button>
              </div>
            </div>
          </el-checkbox-group>
        </div>
      </el-popover>
    </div>
    <!-- input框 -->
    <div class="container">
      <div class="item" v-for="(item, index) in inputList" :key="index">
        <el-form-item :label="item.propertyName">
          <el-input v-model="item.statusval" @blur="inputBlur(item)" :key="index" />
        </el-form-item>
      </div>
    </div>
    <!-- 提交表单 -->
    <el-form-item style="float: right">
      <el-button type="primary" @click="onSubmit">添加</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

  <!-- 下半部分 -->
  <div style="margin-top: 6%">
    <el-divider />
    <el-input
      v-model="seachValue.propertyName"
      placeholder="请输入变量名进行搜索"
      clearable
      style="width: 200px; margin-left: 2%"
    />
    <el-button type="primary" @click="getSeachList" style="margin-left: 2%"
      ><el-icon><Search /></el-icon> 搜索
    </el-button>
    <el-button @click="rest"
      ><el-icon><Refresh /></el-icon> 重置
    </el-button>

    <!-- table 表格 -->
    <el-table
      ref="multipleTableRef"
      :data="SysList"
      style="width: 100%; margin-top: 10px"
      show-overflow-tooltip
    >
      <el-table-column type="selection" />
      <!-- <el-table-column property="state" label="名称" show-overflow-tooltip align="center">
      <template #default="scope">{{ scope.row.propertyValue.ammoniaNitrogen }}</template>
    </el-table-column> -->
      <el-table-column label="详情" align="center" style="max-width: 200px">
        <template #default="scope">
          <el-tooltip placement="top" :content="detailsText(scope.row.propertyValue)">
            <div
              class="details-text"
              style="
                max-width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ detailsText(scope.row.propertyValue) }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template #default="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip align="center">
        <template #default="scope">
          <el-link :underline="false" @click="delFishbowl(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-pagination
    style="float: right"
    v-model="currentPage"
    :total="total"
    :page-size="pageSizeS"
    @current-change="handleCurrentChange"
  ></el-pagination>

  <!-- <el-button @click="dds">ddd</el-button> -->
</template>
  
  <script>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import seach from './seach'
import { v4 as uuidv4 } from 'uuid'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const Device = ref(store.state.beforeAllDevice)
    const DeviceType = ref(store.state.deviceTypeStr)
    // const inputRefs = ref(null)
    const ruleForm = ref({
      id: '1234567890',
      pid: '-1',
      name: '系统参数',
      Channels: -1,
      DevicetypeName: '系统参数',
      isShow: '1',
      BaudRate: 9600,
      property: [],
      pins: [],
      version: '3.0',
      type: 'timer',
      dvcActualId: 'timer',
      isDelete: '0'
    })
    // 页面表单
    const form = ref({
      id: 'uuid',
      propertyValue: {
        quantity: '1', //鱼总数量
        weight: '2', // 鱼单体重量
        length: '3', // 鱼单体长度
        ammoniaNitrogen: '4', // 氨氮区间
        waterVolume: '5' //水体容积
      }
    })
    // 页面数组
    const SysList = ref([])
    // 选中的值
    const checkboxGroup1 = ref([])
    // 首选渲染的数组
    const TemplateFishbowl = ref([])
    // 所有数据
    const FishbowlList = ref(null)
    //   顶部输入框 搜索数据
    const seachValue = ref({ propertyName: '' })
    // 多少页
    const page = ref(0)
    // 一页多少条
    const pagesize = ref(10)
    // 当前页数
    const currentPage = ref(null)
    // 总条数
    const total = ref(null)
    //  每页显示的条目数
    const pageSizeS = ref(null)
    // 总页数
    const totalPage = ref(null)
    // 输入框和选择框的反选
    const ShowinputOrOpt = ref(false)
    // 首页选择需要展示的内容
    const indexShowList = ref(null)
    // input list
    const inputList = ref([])
    //
    //
    //
    //

    // 在组件挂载后获取串口列表
    onMounted(() => {
      const listDvcAndDvcVer = window.api.listDvcAndDvcVer()
      const dds = JSON.parse(listDvcAndDvcVer)
      const getmylist = dds.filter((item) => item.id === '1234567890')
      const ddss = JSON.parse(JSON.stringify(getmylist))
      FishbowlList.value = ddss[0]?.property
      newInputList()
      rest()

      const result = window.api.listPropertyByShowPageType(['DIGITAL', 'SWITCH'])
      const list = JSON.parse(result)
      indexShowList.value = list.filter((item) => item.ShowIndex === 'system')
    })

    const newInputList = () => {
      inputList.value = []
      checkboxGroup1.value = []
      FishbowlList.value.forEach((item) => {
        if (item.InputShow) {
          checkboxGroup1.value.push(item.statusName)
          inputList.value.push(item)
        }
      })
    }

    const detailsText = (propertyValue) => {
      return Object.values(propertyValue)
        .map((item) => `${item.propertyName}- ${item.statusval}`)
        .join('\n')
    }
    // 确定提交表单
    const onSubmit = () => {
      form.value.id = uuidv4()
      form.value.propertyValue = inputList.value
      const res = window.api.insertFishbowl(JSON.stringify(form.value))
      if (res === '新增成功') {
        ElMessage.success(res)
      } else {
        ElMessage.error(res)
      }
      rest()
    }

    // 删除 鱼桶数据
    const delFishbowl = (id) => {
      const res = window.api.removeFishbowl(id)
      if (res === '删除成功') {
        ElMessage.success(res)
      } else {
        ElMessage.error(res)
      }
      rest()
    }

    // 搜索 页面 跳转
    const handleCurrentChange = (newPage) => {
      page.value = newPage - 1
      getSeachList()
    }

    // 搜索数据
    const getSeachList = () => {
      seachValue.value.propertyName = seachValue.value.propertyName.trim()
      const res = seach.seachList(seachValue.value, page.value, pagesize.value)
      SysList.value = res.Searchlist
      currentPage.value = res.totalList.currentPage
      pageSizeS.value = res.totalList.pageSize
      total.value = res.totalList.total
      totalPage.value = res.totalList.totalPage
    }

    // 重置
    const rest = () => {
      // const res = window.api.listFishbowl()
      // SysList.value = JSON.parse(res)
      getSeachList()
      seachValue.value.propertyName = ''
    }

    // 双击显示隐藏
    const checkMybox = (data) => {
      FishbowlList.value.forEach((item) => {
        if (item.statusName === data.statusName) {
          item.ShowinputOrOpt = true
        } else {
          item.ShowinputOrOpt = false
        }
      })
    }

    // 确定修改名字
    const BtnOk = (data) => {
      data.ShowinputOrOpt = false
      ruleForm.value.property = FishbowlList.value
      const res = window.api.updateDvcAndDvcVersion(JSON.stringify(ruleForm.value))
      FishbowlList.value.forEach((item) => {
        if (item.InputShow) {
          checkboxGroup1.value.push(item.propertyName)
        }
      })
    }

    // 取消修改名字
    const Close = (data) => {
      data.ShowinputOrOpt = false
    }

    // 随时更新数据
    const NewList = (data, index) => {
      data.InputShow = !data.InputShow
      ruleForm.value.property = FishbowlList.value
      const res = window.api.updateDvcAndDvcVersion(JSON.stringify(ruleForm.value))
      newInputList()
    }

    const dds = () => {}

    const checkbox = (data) => {}

    const inputBlur = (data) => {
      ruleForm.value.property = FishbowlList.value
      const res = window.api.updateDvcAndDvcVersion(JSON.stringify(ruleForm.value))
      data.ShowinputOrOpt = false
    }
    return {
      Device,
      SysList,
      form,
      page,
      pagesize,
      currentPage,
      total,
      pageSizeS,
      totalPage,
      seachValue,
      TemplateFishbowl,
      FishbowlList,
      checkboxGroup1,
      ShowinputOrOpt,
      indexShowList,
      inputList,
      detailsText,
      BtnOk,
      Close,
      handleCurrentChange,
      onSubmit,
      dds,
      delFishbowl,
      getSeachList,
      rest,
      checkMybox,
      checkbox,
      inputBlur,
      NewList
    }
  }
}
</script>
  
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2%;
}

.item {
  width: 23%; /* 调整宽度，确保每行显示三个元素 */
  box-sizing: border-box; /* 计算边框在内 */
  margin-left: 2%;
}
</style>
  